<template>
  <div class="china-chart" ref="chinaChartRef"></div>
</template>

<script lang="ts">
export default {
  name: 'ChinaChart',
}
</script>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import china from './china.json'

//注册地图
echarts.registerMap('china', china as any)

// 新增确诊数据
const data = [
  { name: '台湾', value: '34580' },
  { name: '香港', value: '1497' },
  { name: '四川', value: '134' },
  { name: '广东', value: '53' },
  { name: '西藏', value: '53' },
  { name: '海南', value: '24' },
  { name: '内蒙古', value: '14' },
  { name: '天津', value: '12' },
  { name: '福建', value: '10' },
  { name: '黑龙江', value: '10' },
  { name: '辽宁', value: '9' },
  { name: '青海', value: '9' },
  { name: '重庆', value: '8' },
  { name: '上海', value: '7' },
  { name: '陕西', value: '5' },
  { name: '山东', value: '5' },
  { name: '新疆', value: '5' },
  { name: '北京', value: '4' },
  { name: '云南', value: '4' },
  { name: '江苏', value: '2' },
  { name: '湖北', value: '1' },
  { name: '吉林', value: '1' },
  { name: '河南', value: '1' },
  { name: '江西', value: '1' },
  { name: '甘肃', value: '1' },
  { name: '浙江', value: '0' },
  { name: '广西', value: '0' },
  { name: '河北', value: '0' },
  { name: '安徽', value: '0' },
  { name: '湖南', value: '0' },
  { name: '澳门', value: '0' },
  { name: '山西', value: '0' },
  { name: '贵州', value: '0' },
  { name: '宁夏', value: '0' },
]

const chinaChartRef = ref()
onMounted(() => {
  const myEchart = echarts.init(chinaChartRef.value)
  const option = {
    title: {
      text: '新冠疫情新增确诊数据',
      left: 'center',
      top: 20,
    },
    series: {
      type: 'map',
      map: 'china',
      label: {
        show: true,
      },
      data,
    },
    tooltip: {},
    visualMap: {
      type: 'piecewise',
      pieces: [
        { min: 1001, color: '#b80909' },
        { min: 101, max: 1000, color: '#f57567' }, // 高风险
        { min: 11, max: 100, color: '#ff9985' }, // 中风险
        { min: 1, max: 10, color: '#ffe5db' }, // 低风险
        { min: 0, max: 0, color: '#fff' }, // 0风险
      ],
    },
  }
  myEchart.setOption(option)
})
</script>

<style scoped>
.china-chart {
  height: 600px;
}
</style>
